<div class="bz-table-container" [ngStyle]="{width:bzWidth}" [id]="localTableKey">
  <nz-table #bzTable
            *ngIf="columns && columns.length > 0"
            [nzData]="listOfData"
            [nzBordered]="false"
            [nzFrontPagination]="bzFrontPagination"
            [nzShowPagination]="false"
            [nzLoading]="bzLoading"
            [nzTotal]="bzTotal"
            [nzPageIndex]="bzPageIndex"
            [nzPageSize]="bzPageSize"
            [nzShowTotal]="bzShowTotalTpl || rangeTemplate"
            [nzNoResult]="bzNoResultTpl || nzNoResultTemplate"
            [nzLoadingIndicator]="loadingIndicatorTpl"
            [nzScroll]="{x:'100%',y:height}"
            (nzCurrentPageDataChange)="bzCurrentPageDataChange.emit($event)">
    <thead [nzSingleSort]="tableSortingComponent?.mode === 'single'"
           (nzSortChange)="sortChange($event)">
      <tr [id]="localTableKey+'tr'">
        <th *ngIf="bzMasterDetail" class="nzshowexpand" nzShowExpand [nzLeft]="'0px'" nzWidth="40px"></th>
        <th *ngIf="getShowSelect()" class="nzshowcheckbox" nzWidth="60px"
            [nzShowCheckbox]="tableSelectionComponent?.mode === 'multiple' || bzSelectionMode === 'multiple'"
            [nzShowRowSelection]="(tableSelectionComponent?.mode === 'multiple' || bzSelectionMode === 'multiple') && tableSelectionComponent?.bzSelections"
            [nzLeft]="bzMasterDetail ? '40px':'0px'"
            [nzSelections]="listOfSelection"
            [(nzChecked)]="isAllDisplayDataChecked"
            [nzIndeterminate]="isIndeterminate"
            (nzCheckedChange)="checkAll($event)"></th>
        <ng-container *ngFor="let column of leftColumns;let index=index;trackBy:tdTrackByFn">
          <th class="bz-table-th-left"
              [nzAlign]="alignFn(column, bzTable?.data[0])"
              [nzShowSort]="showSortFn(column)"
              [nzWidth]="column.nzWidth + 'px'"
              [nzSortKey]="column.dataField"
              [nzLeft]="column.nzLeft + 'px'"
              [ngStyle]="{'min-width':column.nzWidth + 'px'}"
              (contextmenu)="contextFixedMenu($event, fixedMenu,column)">
            <div class="bz-table-th" [ngStyle]="{'min-width':(column.nzWidth - otherWidth)  + 'px'}">
              <ng-container [ngTemplateOutlet]="column.headerCellTemplate ? column.headerCellTemplate : headerTpl"
                            [ngTemplateOutletContext]="{$implicit:column}"></ng-container>
            </div>
          </th>
        </ng-container>
        <ng-container *ngFor="let column of centerColumns;let index=index;trackBy:tdTrackByFn">
          <th class="bz-table-th-center"
              [nzAlign]="alignFn(column, bzTable?.data[0])"
              [nzShowSort]="showSortFn(column)"
              [nzWidth]="column.nzWidth + 'px'"
              [nzSortKey]="column.dataField"
              [ngStyle]="{'min-width':column.nzWidth + 'px'}"
              (contextmenu)="contextFixedMenu($event, fixedMenu,column)">
            <div class="bz-table-th" [ngStyle]="{'min-width':(column.nzWidth - otherWidth) + 'px'}">
              <ng-container [ngTemplateOutlet]="column.headerCellTemplate ? column.headerCellTemplate : headerTpl"
                            [ngTemplateOutletContext]="{$implicit:column}"></ng-container>
            </div>
          </th>
        </ng-container>
        <ng-container *ngFor="let column of rightColumns;let index=index;trackBy:tdTrackByFn">
          <th class="bz-table-th-right"
              [nzAlign]="alignFn(column, bzTable?.data[0])"
              [nzShowSort]="showSortFn(column)"
              [nzWidth]="column.nzWidth + 'px'"
              [nzSortKey]="column.dataField"
              [nzRight]="column.nzRight + 'px'"
              [ngStyle]="{'min-width':column.nzWidth + 'px'}"
              (contextmenu)="contextFixedMenu($event, fixedMenu,column)">
            <div class="bz-table-th" [ngStyle]="{'min-width':(column.nzWidth - otherWidth) + 'px'}">
              <ng-container [ngTemplateOutlet]="column.headerCellTemplate ? column.headerCellTemplate : headerTpl"
                            [ngTemplateOutletContext]="{$implicit:column}"></ng-container>
            </div>
          </th>
        </ng-container>
        <th *ngIf="name" class="bzColumnSetting" nzRight="0">
          <div [class]="'column-setting' + ' ' + localTableKey+'setting'">
            <i class="unex unex-icon-setting"></i>
            <div class="tips">
              <i class="arrow"></i>
              {{i18nService.getValue('@custom-header', 'core')}}
            </div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <ng-template ngFor let-data let-index="index" [ngForOf]="bzTable.data" [ngForTrackBy]="trTrackByFn">
        <tr (click)="checkItemTr($event,data,index)">
          <td *ngIf="bzMasterDetail" class="nzshowexpand" nzShowExpand [(nzExpand)]="data.expand" [nzLeft]="'0px'" nzWidth="40px"></td>
          <td *ngIf="getShowSelect()" class="nzshowcheckbox" nzShowCheckbox nzWidth="60px"
              [nzLeft]="bzMasterDetail ? '40px':'0px'"
              [class.bzSingle]="tableSelectionComponent?.mode === 'single' || bzSelectionMode === 'single'"
              [nzChecked]="data.checked"
              [nzDisabled]="data.disabled"
              (nzCheckedChange)="checkItem($event,index)"></td>
          <ng-container *ngFor="let column of leftColumns;let index=index;trackBy:tdTrackByFn">
            <td class="bz-table-td-left" [ngStyle]="{'min-width':column.nzWidth + 'px'}"
                [nzAlign]="alignFn(column,data)"
                [nzLeft]="column.nzLeft + 'px'">
              <div class="bz-table-td" [ngStyle]="{'min-width':(column.nzWidth - paddingWidth) + 'px'}">
                <ng-container [ngTemplateOutlet]="column.cellTemplate ? column.cellTemplate : textTpl"
                              [ngTemplateOutletContext]="{$implicit:column,data:data}"></ng-container>
              </div>
            </td>
          </ng-container>
          <ng-container *ngFor="let column of centerColumns;trackBy:tdTrackByFn">
            <td class="bz-table-td-center" [ngStyle]="{'min-width':column.nzWidth + 'px'}"
                [nzAlign]="alignFn(column,data)">
              <div class="bz-table-td" [ngStyle]="{'min-width':(column.nzWidth - paddingWidth) + 'px'}">
                <ng-container [ngTemplateOutlet]="column.cellTemplate ? column.cellTemplate : textTpl"
                              [ngTemplateOutletContext]="{$implicit:column,data:data}"></ng-container>
              </div>
            </td>
          </ng-container>
          <ng-container *ngFor="let column of rightColumns;let index=index;trackBy:tdTrackByFn">
            <td class="bz-table-td-right" [ngStyle]="{'min-width':column.nzWidth + 'px'}"
                [nzAlign]="alignFn(column,data)"
                [nzRight]="column.nzRight + 'px'">
              <div class="bz-table-td" [ngStyle]="{'min-width':(column.nzWidth - paddingWidth) + 'px'}">
                <ng-container [ngTemplateOutlet]="column.cellTemplate ? column.cellTemplate : textTpl"
                              [ngTemplateOutletContext]="{$implicit:column,data:data}"></ng-container>
              </div>
            </td>
          </ng-container>
          <td *ngIf="name" nzRight="0" class="bzColumnSetting"></td>
        </tr>
        <tr [nzExpand]="data.expand">
          <td [colSpan]="getColSpan()">
            <div *ngIf="data.expand" class="bz-master-detail-container">
              <ng-container [ngTemplateOutlet]="bzMasterDetail" [ngTemplateOutletContext]="{$implicit:data}"></ng-container>
            </div>
          </td>
        </tr>
      </ng-template>
    </tbody>
  </nz-table>
  <div class="bz-table-pagination" [id]="localTableKey+'pagination'">
    <nz-pagination *ngIf="bzShowPagination" nzShowSizeChanger
                   [nzShowQuickJumper]="bzShowQuickJumper"
                   [nzPageSizeOptions]="bzPageSizeOptions"
                   [nzSize]="bzSize"
                   [nzSimple]="bzSimple"
                   [nzTotal]="bzTotal"
                   [nzHideOnSinglePage]="false"
                   [nzShowTotal]="bzShowTotalTpl || rangeTemplate"
                   [(nzPageIndex)]="bzPageIndex"
                   [(nzPageSize)]="bzPageSize"
                   (nzPageIndexChange)="bzPageIndexChange.emit($event)"
                   (nzPageSizeChange)="bzPageSizeChange.emit($event)">
    </nz-pagination>
  </div>
</div>

<nz-dropdown-menu #fixedMenu="nzDropdownMenu">
  <ul nz-menu>
    <li nz-submenu nzTitle="{{i18nService.getValue('@fixed')}}">
      <ul>
        <li nz-menu-item [nzDisabled]="activeColumn?.fixed === true && activeColumn?.fixedPosition === 'left'"
            (click)="fixedChange('left',activeColumn,activeColumn?.fixed === true && activeColumn?.fixedPosition === 'left')">
          {{i18nService.getValue('@fixed-left')}}</li>
        <li nz-menu-item [nzDisabled]="activeColumn?.fixed === true && activeColumn?.fixedPosition === 'right'"
            (click)="fixedChange('right',activeColumn,activeColumn?.fixed === true && activeColumn?.fixedPosition === 'right')">
          {{i18nService.getValue('@fixed-right')}}</li>
      </ul>
    </li>
    <li nz-menu-item [nzDisabled]="!activeColumn?.fixedPosition || activeColumn?.fixed !== true"
        (click)="fixedChange('center',activeColumn,!activeColumn?.fixedPosition || activeColumn?.fixed !== true)">
      {{i18nService.getValue('@no-fixed')}}
    </li>
  </ul>
</nz-dropdown-menu>

<ng-template #headerTpl let-column>
  {{ column.caption ? column.caption : column.dataField}}
</ng-template>

<ng-template #textTpl let-column let-data="data">
  {{ textFn(column, data) }}
</ng-template>

<ng-template #loadingIndicatorTpl>
  <div class="bz-table-loading"></div>
</ng-template>

<ng-template #nzNoResultTemplate>
  <div class="bz-table-no-result">
    <div class="bz-table-no-result-content">
      <div class="img" [ngClass]="{'nosearch':!asyncNoResult,'nodata':asyncNoResult}"></div>
      <div>{{i18nService.getValue(asyncNoResult  ? '@search-no-data' : '@no-data')}}</div>
    </div>
  </div>
</ng-template>

<ng-template #rangeTemplate let-range="range" let-total>
  {{i18nService.getValue('@page-total') + ' ' + total + ' ' + i18nService.getValue('@page-items')}}
</ng-template>
